<template>
  <div class="editDialog">
    <el-dialog
      v-model="props.showDialog"
      title="编辑个人信息"
      width="30%"
      center
    >
      <el-form :model="infoForm" :rules="rules">
        <el-form-item label="昵称：" prop="nickName">
          <el-input type="text" v-model="infoForm.nickName" />
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input type="text" v-model="infoForm.email" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="infoForm.password" />
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="infoForm.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
            <el-radio :label="2">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人介绍：">
          <el-input v-model="infoForm.introduce" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel" style="border-radius: 0"
            >取消</el-button
          >
          <el-button
            type="primary"
            style="border-radius: 0"
            @click="handleConfirm"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Cache from "@/utils/Cache";
import { onMounted, reactive } from "vue";
import { useStore } from "vuex";
const store = useStore();
const emits = defineEmits(["sendSaveAndClose", "sendCloseDialog"]);
const props = defineProps({
  showDialog: {
    type: Boolean,
    required: true,
  },
});

const infoForm = reactive({
  nickName: "",
  password: "",
  email: "",
  introduce: "",
  sex: 0,
});

onMounted(() => {
  initFormData();
});

// 初始化表单数据
const initFormData = () => {
  const user = Cache.getItem("user");
  infoForm.nickName = user.nickName;
  infoForm.password = user.password;
  infoForm.email = user.email;
  infoForm.introduce = user.introduce;
  infoForm.sex = user.sex;
};

// 取消按钮事件
const handleCancel = () => {
  emits("sendCloseDialog");
};

// 确认按钮事件
const handleConfirm = () => {
  saveUserInfo();
  emits("sendSaveAndClose");
};

// 保存个人信息至本地缓存
const saveUserInfo = () => {
  const user = Cache.getItem("user");
  user.nickName = infoForm.nickName;
  user.password = infoForm.password;
  user.email = infoForm.email;
  user.introduce = infoForm.introduce;
  user.sex = infoForm.sex;
  Cache.saveItem("user", user);
  store.commit("setIntroduce", user.introduce); // 修改vuex中的个人介绍
};

const rules = {
  nickName: [
    {
      required: true,
      message: "请输入昵称！",
      trigger: "blur",
    },
    { min: 3, max: 20, message: "用户名长度不符！", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "请输入密码！",
      trigger: "blur",
    },
    { min: 5, message: "密码长度不少于5位！", trigger: "blur" },
  ],
  email: [
    {
      required: true,
      message: "请输入邮箱！",
      trigger: "blur",
    },
    {
      pattern:
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(com|cn|net)$/,
      message: "邮箱格式不符！",
      trigger: "blur",
    },
  ],
};
</script>

<style scoped lang="less"></style>
